<template>
  <div class="page-container">

    <div class="add-subscribe">

      <div class="subscribe-title">

        <div class="st-name">
          {{ type }}
        </div>

        <img class="pm-arrow" src="@/assets/images/icon-arrow.png" />

        <select v-model="type">
          <option
            v-for="item in typeList"
            :key="item"
            :value="item"
          >
            {{ item }}
          </option>
        </select>
      </div>

      <div class="subscribe-input">
        <input v-model="keyword" placeholder="请输入关键字" />
      </div>

    </div>

    <div class="footer-btn-con">
      <div class="footer-btn yellow" @click="goBack">回到订阅列表</div>
      <a-spin :spinning="btnLoading" style="flex: 1;">
        <div class="footer-btn" @click="addSubscribe">确定添加</div>
      </a-spin>
    </div>

  </div>
</template>

<script>
import { isBlank } from '@/utils/dataType'
import { dataApi } from '@/api/api'
export default {
  name: 'AddSubscribe',
  data () {
    return {
      typeList: ['任意词', '主题', '题名', '出版社'],
      type: '任意词',
      typeObj: {
        任意词: 0,
        主题: 1,
        题名: 2,
        出版社: 3
      },
      keyword: '',
      btnLoading: false
    }
  },
  created () {
    document.title = '关键词订阅'
  },
  methods: {
    addSubscribe () {
      if (isBlank(this.keyword)) {
        this.$message.error('请输入关键字')
      } else {
        this.btnLoading = true
        const params = {
          keyWordValue: this.keyword,
          subscribeType: this.typeObj[this.type]
        }
        dataApi.saveSub(params)
          .then(res => {
            if (res.data.ack) {
              this.goBack()
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .finally(() => {
            this.btnLoading = false
          })
      }
    },
    goResource (e) {
      this.$router.push({
        path: '/subscribe/resource',
        query: {
          keyword: this.keyword,
          type: this.type
        }
      })
    },
    goBack () {
      this.$router.push('/subscribe')
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding-top: .4rem;
}

.add-subscribe {
  display: flex;
  padding: 0 .16rem;
  font-size: .28rem;
}

.subscribe-title {
  display: flex;
  align-items: center;
  height: .86rem;
  background: #ffffff;
  border-radius: .16rem;
  box-shadow: 0 .04rem .14rem 0 rgba(43, 98, 204, 0.1);
  margin-right: .14rem;
  padding-left: .2rem;
  position: relative;
  select {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: none;
    background: none;
    color: transparent;
  }
}

.pm-arrow {
  width: .14rem;
  height: .24rem;
  transform: rotate(90deg);
  margin: 0 .26rem;
}

.subscribe-input {
  height: .86rem;
  background: #ffffff;
  border-radius: .16rem;
  padding: 0 .2rem;
  box-shadow: 0 .04rem .14rem 0 rgba(43,98,204,0.1);
  flex: 1;
}

.subscribe-input input {
  height: .86rem;
  line-height: .86rem;
  width: 100%;
  border: none;
}

.laytip-btn .btn:first-of-type {
  width: 50%;
}
</style>
